<template>
  <div id="app">
    <div class="top-box">
      <div class="top-main">
        <p style="color:#dddddd;font-size:24px">ToDoList</p>
        <input type="text" placeholder="添加ToDo" name id="inp" v-model="content" @keyup.enter="handleContent" />
      </div>
    </div>
    <div class="main-box">
      <div class="box">
        <div class="title-box">
          <p>正在进行</p>
          <span class="number">{{waitDo}}</span>
        </div>
        <div class="content-box" v-for="(item,index) in Dos" v-show="!(item.flag)" :key="index" >
          <input type="checkbox" :checked="item.flag" class="chose" @click="changeCheck(index)" />
          <div class="content">{{item.content}}</div>
          <p class="btn" @click="handleDel(index)" >-</p>
        </div>
        <div class="title-box">
          <p>已经完成</p>
          <span class="number">{{endDo}}</span>
        </div>
        <div class="content-box" v-for="(item,index) in Dos" v-show="item.flag" :key="index" >
          <input type="checkbox" :checked="item.flag" class="chose" @click="changeCheck(index)" />
          <div class="content">{{item.content}}</div>
          <p class="btn" @click="handleDel(index)">-</p>
        </div>
        
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      content:"",
      Dos:[],
    }
  },
  mounted(){
    var Dos=sessionStorage.getItem("DoData");
    if(Dos){
      this.Dos=JSON.parse(Dos)
    }
  },
  methods: {
    handleContent(){
      var Dos=this.Dos;
      var obj={};
      obj.content=this.content;
      obj.flag=false;
      Dos.unshift(obj);
      var StringDos=JSON.stringify(Dos);
      sessionStorage.setItem("DoData",StringDos);
      this.content="";
    },
    changeCheck(index){
      var Dos=this.Dos;
      Dos[index].flag=!Dos[index].flag;
      this.setStorage();
    },
    setStorage(){
      var StringDos=JSON.stringify(this.Dos);
      sessionStorage.setItem("DoData",StringDos);
    },
    handleDel(index){
      var Dos=this.Dos;
      Dos.splice(index,1);
      this.setStorage();
    }
  },
  computed:{
    waitDo(){
      var Dos=this.Dos;
      var num=0;
      Dos.forEach(item=>{
        item.flag==false;
        num++
      })
      return num;
    },
    endDo(){
      var Dos=this.Dos;
      var num=0;
      Dos.forEach(item=>{
        item.flag==true;
        num++
      })
      return num;
    }
  }
};
</script>
<style lang="scss" scoped>
#app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.main-box {
  width: 600px;
}
.top-main {
  width: 600px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#inp {
  width: 360px;
  height: 24px;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none;
}
.top-box {
  width: 100%;
  height: 50px;
  background: rgb(50, 50, 50);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main-box{
  display: flex;
  flex-direction: column;
}
.box{
  display: flex;
  flex-direction: column;
}
.title-box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 24px;
  font-weight: 700;
  margin: 20px 0;
}
.number{
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #E6E6FA;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}
.content-box{
  display: flex;
  flex-direction: row;
  height: 32px;
  align-items: center;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 3px;
  border-left: 5px solid #629A9C;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  box-sizing: border-box;
  
}
.chose{
  margin-left: 10px;
  width:22px;
  height: 22px;
}
.content{
  width: 505px;
}
.btn{
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
</style>
